<template>
    <div class="tw:p-4">
        <div class="tw:mb-8">
            <h2 class="tw:font-bold tw:mb-2">auto(默认)</h2>
            <div class="tw:h-40 tw:p-2 tw:border-2 tw:border-blue-500 tw:overflow-auto tw:overscroll-auto">
                <div class="tw:h-80 tw:p-2 tw:bg-blue-50">
                    <p v-for="i in 10" :key="i">项目 {{ i }}</p>
                </div>
            </div>
            <p class="tw:text-sm tw:mt-1 tw:text-red-300">滚动到边界会触发父容器的滚动</p>
        </div>

        <div class="tw:mb-8">
            <h2 class="tw:font-bold tw:mb-2">contain</h2>
            <div class="tw:h-40 tw:p-2 tw:border-2 tw:border-green-500 tw:overflow-auto tw:overscroll-contain">
                <div class="tw:h-80 tw:p-2 tw:bg-green-50">
                    <p v-for="i in 10" :key="i">项目 {{ i }}</p>
                </div>
            </div>
            <p class="tw:text-sm tw:mt-1">阻止滚动穿透但保留弹性效果</p>
        </div>

        <div class="tw:mb-8">
            <h2 class="tw:mb-2 tw:text-font">none</h2>
            <div class="tw:h-40 tw:p-2 tw:border-2 tw:border-red-500 tw:overflow-auto tw:overscroll-none">
                <div class="tw:h-80 tw:p-2 tw:bg-red-50">
                    <p v-for="i in 10" :key="i">项目 {{ i }}</p>
                </div>
            </div>
            <p class="tw:mt-1 tw:text-sm">完全禁用滚动穿透和弹性效果</p>
        </div>
    </div>
</template>